<template>
  <div class="events-container">
    <h2 class="text-2xl font-bold mb-6">近期活动日历</h2>
    <el-calendar v-model="calendarDate" class="mb-8">
      <template #dateCell="{ date }">
        <div :class="['calendar-cell', isEventDay(date) ? 'has-event' : '']">
          <span>{{ date.getDate() }}</span>
        </div>
      </template>
    </el-calendar>
    <h2 class="text-2xl font-bold mb-4">活动列表</h2>
    <el-row :gutter="20">
      <el-col v-for="event in events" :key="event.id" :xs="24" :sm="12" :md="8">
        <el-card class="event-card">
          <img :src="event.image" class="event-img mb-2" alt="活动图片" />
          <h3>{{ event.title }}</h3>
          <p class="event-date">{{ event.date }}</p>
          <p class="event-desc">{{ event.description }}</p>
          <el-button type="primary" @click="registerEvent(event.id)">报名参加</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const calendarDate = ref(new Date());
const events = ref([
  {
    id: 1,
    title: '非遗展览',
    date: '2023-10-01',
    description: '展示各类非遗项目，欢迎参观。',
    image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
  },
  {
    id: 2,
    title: '匠人讲座',
    date: '2023-10-15',
    description: '邀请非遗传承人分享技艺。',
    image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg'
  },
  // 更多活动...
]);

const isEventDay = (date) => {
  const d = date.toISOString().slice(0, 10);
  return events.value.some(e => e.date === d);
};

const registerEvent = (eventId) => {
  // 处理报名逻辑
  ElMessage.success('报名成功！');
};
</script>

<style scoped>
.events-container {
  @apply p-4;
  background-color: #f8f9fa;
  max-width: 1100px;
  margin: 0 auto;
}
.event-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}
.event-date {
  color: #409eff;
  font-weight: bold;
  margin-bottom: 6px;
}
.event-desc {
  color: #666;
  margin-bottom: 12px;
}
.el-button {
  font-size: 0.9rem;
}
.calendar-cell {
  text-align: center;
  padding: 2px 0;
  border-radius: 4px;
}
.has-event {
  background: #ffe58f;
  color: #b26a00;
  font-weight: bold;
}
</style> 